<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				height: 100%;
				background: url("image/reg-mobile.jpg") no-repeat;
			}

			.bg {
				height: 660px;
				width: auto;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.box {
				position: relative;
				width: 2200px;
				height: 650px;
				display: inline-block;
			}

			.zhuce {
				position: relative;
				display: flex;
				justify-content: left;
			}

			.zhuce li {
				display: inline-block;
				margin: 10px;
				width: 136px;
				height: 46px;
			}

			.phone {
				position: absolute;
				font-size: 18px;
				left: 50px;
				top: 21px;
				background-color: royalblue;
				padding: 10px 30px;
				color: white;
			}

			.email {
				position: absolute;
				font-size: 18px;
				left: 190px;
				top: 21px;
				background-color: white;
				padding: 10px 30px;
				color: #2361B4;
			}

			.shuru {
				position: absolute;
				top: 64px;
				margin-left: 50px;
				width: 1000px;
				height: 450px;
				background: #fff;
			}

			.shuru .left {
				padding: 45px;
			}

			.shuru .right {
				position: absolute;
				top: 150px;
				left: 650px;
				border-left: 1px dashed #D7D7D7;
			}

			.left li:nth-of-type(1) input {
				width: 312px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				text-indent: 40px;
				border: 1px #d7d7d7 solid;
				background: url("image/email.png") -2px no-repeat;
			}

			.left li:nth-of-type(2) input {
				width: 312px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				text-indent: 40px;
				border: 1px #d7d7d7 solid;
				background: url("image/lianxiren.png") -2px no-repeat;
				margin-top: 15px;
			}

			.left li:nth-of-type(3) input {
				width: 312px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				text-indent: 40px;
				border: 1px #d7d7d7 solid;
				background: url("image/key1.png") -2px no-repeat;
				margin-top: 15px;
			}

			.left li:nth-of-type(4) input {
				width: 312px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				text-indent: 40px;
				border: 1px #d7d7d7 solid;
				background: url("image/key2.png") -2px no-repeat;
				margin-top: 15px;
			}

			.left li:nth-of-type(5) input {
				width: 200px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				text-indent: 40px;
				border: 1px #d7d7d7 solid;
				background: url("image/ma.png") -2px no-repeat;
				margin-top: 15px;
				margin-bottom: 5px;
			}

			.left li:nth-of-type(5) img {
				vertical-align: middle;
			}

			.left span {
				font-size: 12px;
				color: #B4B4B4;
			}

			.left li:nth-of-type(6) input {
				width: 15px;
				font-size: 14px;
				height: 40px;
				border: 1px #d7d7d7 solid;
				vertical-align: middle;
				margin-left: 120px;
			}

			.left li:nth-of-type(6) a {
				color: #01CAFD;
			}

			.left li:nth-of-type(7) button {
				margin-left: 120px;
				margin-top: 30px;
				margin-bottom: 40px;
				width: 100px;
				height: 30px;
				background-color: #55ABE8;
				border-radius: 6px;
				border: none;
				cursor: pointer;
				outline: none;
				color: white;
			}

			.right button {
				margin-left: 120px;
				margin-top: 30px;
				margin-bottom: 40px;
				width: 200px;
				height: 40px;
				background-color: #55ABE8;
				border-radius: 8px;
				border: none;
				cursor: pointer;
				outline: none;
				color: white;
			}
		</style>
		<script src="../../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				$("#email").blur(function() {
					let em = $(this).val();
					console.log(em);
					var regemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					if (regemail.test(em)) {
						$(this).next().text("√").css("color", "green");
						return true;
					}
					$(this).next().text("电子邮件格式不合法").css("color", "red");
					return false;
				});
				$("#nicheng").blur(function() {
					let em = $(this).val();
					console.log(em);
					let rename = /^\w{4,12}/;
					if (em == '') {
						$(this).next().show().html('用户名不能为空').css("color", "red");
						return false
					}
					if (rename.test(em)) {
						$(this).next().text("√").css("color", "green");
						return true
					} else {
						$(this).next().show().html('用户名是4-12位字符，数字、字母和中文').css("color", "red");
						return false
					}
				});
				$("#password").blur(function() {
					// 获取密码框输入的数据
					let vals = $(this).val()
					// 密码正则匹配表达式
					var rePass = /^[\w!-@#$%^&*]{6,20}$/
					// 如果输入框为空，则提示不能为空并return
					if (vals == '') {
						$(this).next().show().html('密码不能为空').css("color", "red");
						return false
					}
					// 正则验证密码输入是否合法
					if (rePass.test(vals)) {
						$(this).next().text("√").css("color", "green");
						return true
					} else {
						// 如果匹配失败，则显示span标签，替换提示信息
						$(this).next().show().html('密码是6到20位字母、数字，还可包含@!#$%^&*-字符').css("color", "red");
						return false
					}
				});
				$("#password2").blur(function() {
					// 获取重复密码框输入的数据
					var vals = $("#password").val()
					var cvals = $(this).val()
					if (cvals == '') {
						$(this).next().show().html('重复密码框不能为空').css("color", "red");
						return false
					}
					if (vals == cvals) {
						$(this).next().text("√").css("color", "green");
						return true
					} else {
						$(this).next().show().html('两次密码输入不一致，请重新输入').css("color", "red");
						return false
					}
				});
				$("#yan").blur(function() {
					let yanzhen = $(this).val();
					if (yanzhen == '') {
						$(this).next().show().html('验证码不能为空').css("color", "red");
						return false
					}
				});
			});
		</script>
	</head>
	<body>
		<header></header>

		<main>
			<form action="3.html">
				<div class="box">
					<ul class="zhuce">
						<li><a href="#" class="phone">手机注册</a></li>
						<li><a href="#" class="email">邮箱注册</a></li>
					</ul>
					<div class="shuru">
						<div class="left">
							<ul>
								<li>
									<input type="email" name="youxiang" id="email" required placeholder="请输入您的常用邮箱">
									<span>请输入您的常用邮箱</span>
								</li>
								<li>
									<input type="text" name="nicheng" id="nicheng" required placeholder="请输入昵称">
									<span>4-12位字符、英文、数字或者中文均可</span>
								</li>
								<li>
									<input type="password" name="password" id="password" required placeholder="请输入密码">
									<span>6-16位字符或数字、字母,区分大小写</span>
								</li>
								<li>
									<input type="password" name="password2" id="password2" required
										placeholder="请再次输入密码">
									<span>6-16位字符或数字、字母,区分大小写</span>
								</li>
								<li>
									<input type="text" name="yanz" id="yan" required placeholder="请输入右侧验证码">
									<span>不区分大小写，点击图片可更换</span>
									<img src="image/验证码.png" />

								</li>
								<li>
									<input type="checkbox" name="fuwu" id="">
									<span>
										同意<a href="#">用户服务条款</a>
									</span>
								</li>
								<li>
									<input type="submit" value="注册" /> </button>
								</li>
							</ul>
						</div>
						<div class="right">
							<button type="submit">已有账号，马上登录</button>
						</div>
					</div>
				</div>
			</form>
		</main>

		<footer>
		</footer>
	</body>
</html>
